<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>欢迎登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="dlq" name="author" />

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
    <link href="./app/05login/css/login.css" rel="stylesheet" type="text/css" />
   
    <link rel="shortcut icon" href="favicon.ico" /> 

    <style type="text/css">
        

    </style>
</head>


<body class=" login">
    <!-- BEGIN : LOGIN PAGE 5-1 -->

    <div class="user-login-5">
        <div class="row bs-reset">
            <div class="col-md-6 bs-reset" >
                <!--data-ride='carousel'用来标记在页面加载之后即开始启动的轮播组件-->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active login-bg"
                    style="background-image:url(./app/00pageframework/img/bg5.jpg)"
                    >
                    </div>
                    <!--<div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg2.jpg)"
                    >
                    </div>
                    <div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg3.jpg)"
                    >
                    </div>
                    <div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg4.jpg)"
                    >
                    </div>-->
                  </div>
                </div>
               
            </div>
                                       
                              
             
            <div class="col-md-6 login-container bs-reset">
                <div class="pull-right">                
                    <a href= "http://shangke2.oss-cn-qingdao.aliyuncs.com/app/t1_1503024884000/设备监控用户手册.pdf" target="_Blank" >点击查看用户手册</a>
                </div>
                <div class="login-content">
                    <h1>欢迎登陆</h1>                           
                    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;居游是深度体验游的一种形式， 追求自由、自在、悠闲、舒适的慢养生活。不像旅游团来去匆匆，走马观花，浮光掠影，自由度低，体验度少。 </p>
                    <form action="javascript:;" class="login-form" method="post">
                        <!-- <div class="alert alert-danger display-hide">
                            <button class="close" data-close="alert"></button>
                            <span>Enter any username and password. </span>
                        </div> -->
                        <div class="row">
                            <div class="col-xs-6">
                                <input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="用户名" name="username" id="username" required/> </div>
                            <div class="col-xs-6">
                                <input class="form-control form-control-solid placeholder-no-fix form-group" type="password" autocomplete="off" placeholder="密码" name="password" id="password" required/> </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="rem-password">
                                    <label class="rememberme mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" name="remember" value="1" /> 记住我
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-8 text-right">
                                <div class="forgot-password">
                                    <a href="javascript:;" id="forget-password" class="forget-password">忘记密码?</a>
                                </div>
                                <button class="btn green" type="submit">登陆</button>
                            </div>
                        </div>
                    </form>
                    <!-- BEGIN FORGOT PASSWORD FORM -->
                    <form class="forget-form" action="javascript:;" method="post">
                        <h3 class="font-green">忘记密码 ?</h3>
                        <p> 输入邮箱用来接收密码. </p>
                        <div class="form-group">
                            <input class="form-control placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="Email" name="email" /> </div>
                        <div class="form-actions">
                            <button type="button" id="back-btn" class="btn green btn-outline">返回</button>
                            <button type="submit" class="btn btn-success uppercase pull-right">提交</button>
                        </div>
                    </form>
                    <!-- END FORGOT PASSWORD FORM -->
                </div>
                <div class="login-footer">
                    <div class="row bs-reset">
                        <div class="col-xs-5 bs-reset">
                            <ul class="login-social">
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-facebook"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-dribbble"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-7 bs-reset">
                            <div class="login-copyright text-right">
                                <p>Copyright &copy; juyou 2017</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- END : LOGIN PAGE 5-1 -->
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/additional-methods.min.js"></script>

<script type="text/javascript">

    var Login = function() {

        var handleLogin = function() {

            $('.login-form').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    remember: {
                        required: false
                    }
                },

                messages: {
                    username: {
                        required: "Username is required."
                    },
                    password: {
                        required: "Password is required."
                    }
                },

                invalidHandler: function(event, validator) { //display error alert on form submit   
                    $('.alert-danger', $('.login-form')).show();
                },

                highlight: function(element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function(label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function(error, element) {
                    error.insertAfter(element.closest('.input-icon'));
                },

                submitHandler: function(form) {
                    var username = $('#username').val();
                    var password = $('#password').val();

                    console.log(username);
                    console.log(password);
                    
                    $.ajax({
                        'url' : "/manager/ajaxlogin",
                        'type':'POST',
                        'data':{
                            'username' : username,
                            'password' : password,
                        },
                        'dataType' : 'json',
                        'success':function(data,textStatus,jqXHR){
                            console.log(data)
                            console.log(textStatus)
                            console.log(jqXHR)
                            if(data.errcode === 0){
                                location.href = '/';
                            }else{
                                alert(data.errmsg);
                            }
                        },
                    });
                    
                    //form.submit(); // form validation success, call ajax form submit
                }
            });

            $('.login-form input').keypress(function(e) {

                if (e.which == 13) {
                    if ($('.login-form').validate().form()) {
                        $('.login-form').submit(); //form validation success, call ajax form submit
                    }
                    return false;
                }
            });

            $('.forget-form input').keypress(function(e) {
                if (e.which == 13) {
                    if ($('.forget-form').validate().form()) {
                        $('.forget-form').submit();
                    }
                    return false;
                }
            });

            $('#forget-password').click(function(){
                $('.login-form').hide();
                $('.forget-form').show();
            });

            $('#back-btn').click(function(){
                $('.login-form').show();
                $('.forget-form').hide();
            });
        }

        return {
            //main function to initiate the module
            init: function() {

                handleLogin();

                $('.forget-form').hide();

            }
        };

    }();

    jQuery(document).ready(function() {
        Login.init();
    });

</script>      
</body>

</html>